<template>
	<view>
		<view class="tabs">
			<u-tabs lineWidth="100rpx" :activeStyle="{
					color: '#C5996A'
				}" itemStyle="height:92rpx;width:156rpx;" lineHeight="2" lineColor="#C5996A" :list="list1" @click="click"></u-tabs>
		</view>
		<view class="list">
			<template v-if="orderlist.length">
				<view class="item" v-for="(item, index) in orderlist" :key="item.id" @click="toDetail(item.id)">
					<view class="top">
						<image :src="item.avatar" mode="widthFix"></image>
						{{ item.nickname }}
					</view>
					<view class="bottom">
						<view class="lists">开始时间：{{ item.start_time }}</view>
						<view class="lists">店铺名称：{{ item.store_name }}</view>
						<view class="lists">地址：{{ item.address }}</view>
					</view>
					<view class="btns">
						<view class="money">
							<text style="font-size: 28rpx;">￥</text>
							{{ item.pay_price }}
						</view>
						<view class="buttons" v-if="type == 1">
							<view class="button" @click.stop="daka(item.id)">打卡</view>
							<view class="button" @click.stop="wancheng(item.id)">完成</view>
						</view>
					</view>
				</view>
			</template>
			<template v-else>
				<u-empty text="暂无订单数据..." mode="data"></u-empty>
			</template>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list1: [{
						name: '预约中',
						type: 4
					},
					{
						name: '进行中',
						type: 1
					},
					{
						name: '已完成',
						type: 2
					},
					{
						name: '已取消',
						type: 3
					}
				],
				page: 1,
				type: 4,
				orderlist: [],
				last_page: ''
			};
		},
		onShow() {
			this.getData();
		},
		methods: {
			toDetail(e) {
				uni.navigateTo({
					url: '/pages/oederdetail/oederdetail?orderid=' + e
				});
			},
			wancheng(e) {
				uni.showLoading();
				this.https('/order/completeMasterOrder', { orderid: e }).then(res => {
					// uni.showToast({
					// 	title: res.msg,
					// 	icon: 'none'
					// });
					console.log(res, '完成res');
					this.page = 1;
					this.getData();
					uni.hideLoading();
				});
			},
			daka(e) {
				uni.navigateTo({
					url: '/pages/photo/photo?orderid=' + e
				});
			},
			click(item) {
				this.type = item.type;
				this.page = 1;
				this.orderlist.splice(0, this.orderlist.length);
				this.getData();
			},
			getData() {
				this.https('/order/masterOrderList', { page: this.page, type: this.type })
					.then(res => {
						if (this.page == 1) {
							this.orderlist = res.data.data;
						} else {
							this.orderlist = this.orderlist.concat(res.data.data);
						}
						this.last_page = res.data.last_page;
					})
					.catch(err => {
						// uni.showToast({
						// 	title: err.msg,
						// 	icon: 'none'
						// });
					});
			}
		},
		onReachBottom() {
			this.page++;
			if (this.page > this.last_page) {
				return;
			}
			this.getData();
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}

	.tabs {
		width: 100%;
		display: flex;
		justify-content: space-evenly;
		background-color: #fff;
	}

	.list {
		padding: 32rpx;

		.item {
			padding: 32rpx;
			border-radius: 16rpx;
			background-color: #fff;
			margin-bottom: 32rpx;

			.top {
				font-size: 32rpx;
				color: #1d2129;
				display: flex;
				align-items: center;
				font-weight: 500;

				image {
					width: 64rpx;
					margin-right: 16rpx;
					border-radius: 50%;
				}
			}

			.bottom {
				font-size: 24rpx;
				color: #4e5969;
				padding: 12rpx 0 12rpx 0;
				border-bottom: 1rpx solid #e7e7e7;

				.lists {
					padding: 12rpx 0;
				}
			}

			.btns {
				padding: 16rpx 0 0 0;
				font-size: 24rpx;
				display: flex;
				justify-content: space-between;

				.money {
					font-weight: bold;
					font-size: 36rpx;
				}

				.buttons {
					display: flex;
					justify-content: end;
					align-items: center;

					.button {
						width: 112rpx;
						height: 56rpx;
						border-radius: 52rpx;
						opacity: 1;
						text-align: center;
						line-height: 52rpx;
						color: #45bb52;
						border: 2rpx solid #45bb52;
						margin-left: 16rpx;
					}
				}
			}
		}
	}
</style>